<template>
  <FrameWork>
  </FrameWork>
  <ContentField>
    <form @submit.prevent="updateInfo(id,username,phone,email)">
        <!-- <span type="hidden" name="id" value="id">id: {{ id }}</span> -->
        <div class="form-group" ><label>&nbsp;&nbsp;id:</label>
          <span class="form-control disabled"  name="id">{{ id }}</span>
        </div>
        <div class="form-group" ><label>&nbsp;&nbsp;用户名:</label>
          <input v-model="username" class="form-control"  type="text" name="username">
        </div>
        <div class="form-group" ><label>&nbsp;&nbsp;手机号:</label>
          <input v-model="phone" class="form-control"  type="phone" name="phone">
        </div>
        <div class="form-group"><label >&nbsp;&nbsp;邮&nbsp;箱:</label>
          <input v-model="email" class="form-control"  type="email" name="email">
        </div>
        <div class="form-group" style="text-align:center;">
          <div class="error-message">{{ error_message }}</div>
          <button class="btn btn-primary" type="submit" style="width:20%;margin-top:10px;">修改</button>
        </div>
      </form>
  </ContentField>
</template>



<script>

import FrameWork from '@/components/admin/FrameWork.vue';
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import { useRoute } from 'vue-router';
import  {useStore}  from 'vuex';
import $ from 'jquery';
import router from "@/router/index";


export default{
  name: 'AccountManageView',
  components:{
      FrameWork,
      ContentField,
  },

  setup(){
    const route = useRoute();
    const store = useStore();
    let id = ref('');
    let username = ref('');
    let phone = ref('');
    let email = ref('');
    let error_message = ref('');
  
    //console.log(route.params);
    id.value = route.params.id;
    let Id = id.value;
  
    const queryById = (Id) => {

        $.ajax({   //查询要修改信息的用户的信息
        url:  "http://localhost:8090/sls/account/queryById/"+ Id,
        type: 'get',
        headers: {
              Authorization: "Bearer " + store.state.user.token,
          },
        success(resp){
          //console.log(resp);
            username.value = resp.username;
            phone.value = resp.phone;
            if(resp.email == null){
              email.value = 'null';
            }
            else{
              email.value = resp.email;
            }
        },
        error(resp){
            console.log(resp);
          }
        
      });
    }

    queryById(Id);

    const updateInfo = (id,username,phone,email) =>{

        $.ajax({    //修改用户信息
                url: "http://localhost:8090/sls/account/update",
                type: "post",
                data:{
                  id: id,
                  username: username,
                  phone: phone,
                  email: email,
                },
                headers: {
                Authorization: "Bearer " + store.state.user.token,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    //console.log(resp.error_message);
                    router.push({name: 'accountManage'}); //修改成功,跳转到用户账号管理页面
                  }else{
                    //console.log(resp.error_message);
                    error_message = resp.error_message;
                  }
                },
                error(resp){
                    console.log(resp);
                  }
        });

    }


      return {
        queryById,
        updateInfo,
        route,
        id,
        username,
        phone,
        email,
        error_message,
      }

  }

  
}

</script>



<style scoped>

.form-group{
  margin: 5px auto;
}
.error-message{
        color:red;
}

</style>